<template>
  <div style="width: 100%;">
    <el-card>
    <!-- 搜索框和按钮 -->
    <el-row type="flex" justify="space-between" align="middle" style="margin: 8px 0 18px 0;">
      <el-col :span="12" class="inputSearch" style="display: flex;">
        <el-input
          v-model="searchQuery"
          placeholder="请输入用户信息"
          @input="handleSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch" style="margin-left: 10px;">搜索用户</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="dialogNewAdmin = true">新增用户</el-button>
      </el-col>
    </el-row>

    <!-- 新建管理员弹窗 -->
    <el-dialog
      title="新建管理员用户"
      :visible.sync="dialogNewAdmin"
      width="50%"
      @close="dialogNewAdmin = false"
    >
      <el-form :model="newManagerForm" ref="newManagerForm" :rules="rules" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="newManagerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="newManagerForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="newManagerForm.email"></el-input>
        </el-form-item>
        <el-form-item label="员工卡" prop="employeeCard">
          <el-input v-model="newManagerForm.employeeCard"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="newManagerForm.idCard"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogNewAdmin = false">取消</el-button>
        <el-button type="primary" @click="addAdmin">确定</el-button>
      </span>
    </el-dialog>

    <!-- 展示管理员信息 -->
    <el-table
      :data="currentPageData"
      :max-width="800"
      style="width: 100%;overflow-x: auto;overflow-y: auto;border-top: 2px solid #BBB;"
      stripe
    >
      <el-table-column prop="id" min-width="200" label="账号"></el-table-column>

      <el-table-column prop="username" min-width="150" label="用户名"></el-table-column>

      <el-table-column prop="name" min-width="150" label="姓名"></el-table-column>

      <el-table-column prop="phone" min-width="150" label="手机号码"></el-table-column>

      <el-table-column prop="email" min-width="200" label="电子邮箱"></el-table-column>

      <el-table-column prop="employeeCard" min-width="150" label="员工号码"></el-table-column>

      <el-table-column prop="idCard" min-width="200" label="身份证"></el-table-column>

      <el-table-column prop="type" min-width="150" label="权限"></el-table-column>

      <el-table-column prop="auditStatus" min-width="150" label="审核状态"></el-table-column>

      <el-table-column prop="onboardingStatus" min-width="200" label="在职状态"></el-table-column>

      <el-table-column prop="createTime" min-width="200" label="注册时间"></el-table-column>

      <!-- 操作 -->
      <el-table-column min-width="250" fixed="right" label="操作" style="display: flex;justify-content: space-between;">
        <template slot-scope="scope">
          <el-button type="primary" @click="showConfirmDialogLeave(scope.row)">离职审核</el-button>
          <el-button type="primary" @click="showConfirmDialogType(scope.row)">更改权限</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 离职审核确认框 -->
    <el-dialog
      title="确认操作"
      :visible.sync="confirmDialogLeave"
      width="40%"
      @cancel="confirmDialogLeave = false"
    >
      <span>您确定要执行此操作吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmDialogLeave = false;">取 消</el-button>
        <el-button type="primary" @click="handleLeave()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 更改权限确认框 -->
    <el-dialog
      title="确认操作"
      :visible.sync="confirmDialogType"
      width="40%"
      @cancel="confirmDialogType = false"
    >
      <span>您确定要执行此操作吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmDialogType = false;">取 消</el-button>
        <el-button type="primary" @click="changleType()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页组件 -->
    <!--
      size-change是处理长度变化，根据长度来显示不同的信息
      change是处理当前页码，监测页码变化，然后更新数据
     -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 10, // 每页展示的信息数
      total: 0, // 后端返回来的全部数据总数
      currentPageData: [], // 当前页面的数据信息

      // 用户输入的信息
      searchQuery: '',

      // 打开弹窗用来新增用户
      dialogNewAdmin: false,

      // 这个是新增用户信息
      newManagerForm: {
        name: '',
        phone: '',
        email: '',
        employeeCard: '',
        idCard: ''
      },

      // 这个是输入约束
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, message: '长度须在两个字以上', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        employeeCard: [
          { required: true, message: '请输入员工卡', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /^\d{17}[\dXx]$/, message: '身份证号格式不正确', trigger: 'blur' }
        ]
      },

      // 这个是弹出离职审核确认框
      confirmDialogLeave: false,

      // 保存当前的行数据 - 离职审核
      currentRowLeave: {
        id: '',
        onboardingStatus: ''
      },

      // 这个是弹出更改类型确认框
      confirmDialogType: false,

      // 保存当前行的数据 - 更改权限
      currentRowType: {
        id: '',
        type: ''
      }
    }
  },

  // 一进页面就请求数据
  mounted () {
    this.fetchData()
  },

  methods: {

    // 更新数据加更新表格
    async fetchData () {
      try {
        // 请求后端数据 + 携带参数
        const response = await axios.post('http://localhost:8080/pixington/system/manager/page', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        })

        // 返回当前页数据、总条数，然后显示到页面上
        this.currentPageData = response.data.items
        this.total = response.data.total
      } catch (error) {
        console.error(error)
      }
    },

    // 切换请求数据
    handleCurrentChange (val) {
      // 这里的val是页码
      // console.log(val, '1')
      this.currentPage = val
      this.fetchData()
    },

    // 搜索用户
    async handleSearch () {
      // 用户输入了
      if (this.searchQuery.trim() !== '') {
        // 如果用户输入，并点击了搜索，即返回搜索的信息
        await axios.post('http://localhost:8080/pixington/system/manager/page', {
          params: {
            page: this.currentPage,
            size: this.pageSize,
            // 这个是做搜索用的参数，任选其一即可
            username: this.searchQuery,
            name: this.searchQuery,
            phone: this.searchQuery,
            email: this.searchQuery,
            employeeCard: this.searchQuery,
            idCard: this.searchQuery,
            type: this.searchQuery,
            auditStatus: this.searchQuery,
            onboardingStatus: this.searchQuery
          }
        })
          .then((response) => {
          // 把后端返回的数据赋给搜索
            this.currentPageData = response.data
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: 'warning',
              duration: 2000
            })
          })
      } else {
        this.fetchData()
      }
    },

    // 新增用户
    async addAdmin () {
      this.$refs.newManagerForm.validate(async (valid) => {
        if (!valid) {
          this.$message({
            message: '请检查你的输入！',
            type: 'warning',
            duration: 2000
          })
        } else {
          await axios.get('http://localhost:8080/pixington/system/manager/enter', {
            name: this.newManagerForm.name,
            phone: this.newManagerForm.phone,
            email: this.newManagerForm.email,
            employeeCard: this.newManagerForm.employeeCard,
            idCard: this.newManagerForm.idCard
          })
            .then(() => {
              // 关闭弹窗
              this.dialogNewAdmin = false
              // 显示成功标签
              this.$message({
                message: '添加成功！',
                type: 'success',
                duration: 2000
              })

              // 重新渲染
              this.fetchData()

              // 清空表单输入
              this.newManagerForm = {
                name: '',
                phone: '',
                email: '',
                employeeCard: '',
                idCard: ''
              }
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: 'warning',
                duration: 2000
              })
            })
        }
      })
    },

    // 展示离职确认框
    showConfirmDialogLeave (row) {
      // 显示
      this.confirmDialogLeave = true

      // 赋值
      this.currentRowLeave.id = row.id
      this.currentRowLeave.onboardingStatus = row.onboardingStatus
    },

    // 离职审核
    async handleLeave () {
      // console.log(this.currentRowLeave.id, this.currentRowLeave.onboardingStatus)
      await axios.put('http://localhost:8080/pixington/system/manager/onboard/1758470335823204354?managerOnboardingStatusEnum=ALREADY_EMPLOYED', {
        id: this.currentRowLeave.id,
        onboardingStatus: this.currentRowLeave.onboardingStatus
      })
        .then((response) => {
          // 关闭弹窗
          this.confirmDialogLeave = false
          // 显示成功信息
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 2000
          })
          // 重新渲染
          this.fetchData()
        })
        .catch((err) => {
          // 显示失败信息
          this.$message({
            message: err,
            type: 'success',
            duration: 2000
          })

          this.confirmDialogLeave = false
        })
    },

    // 展示更改类型确认框
    showConfirmDialogType (row) {
      console.log(row.type)
      // 显示
      this.confirmDialogType = true
      // 保存数据
      this.currentRowType.id = row.id
      this.currentRowType.type = row.type
    },

    // 更改类型
    async changleType () {
      // console.log(this.currentRowType.id, this.currentRowType.type)
      await axios.put('http://localhost:8080/pixington/system/manager/type/1758470335823204354?managerTypeEnum=SUPER_MANAGER', {
        id: this.currentRowType.id,
        onboardingStatus: this.currentRowType.type
      })
        .then((response) => {
          // 关闭弹窗
          this.confirmDialogType = false
          // 显示成功信息
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 2000
          })
          // 重新渲染
          this.fetchData()
        })
        .catch((err) => {
          // 显示失败信息
          this.$message({
            message: err,
            type: 'success',
            duration: 2000
          })

          this.confirmDialogType = false
        })
    }

  }
}
</script>

<style>
.inputSearch .el-input {
  flex: 1;
}
</style>
